<template>
	<view class="my-container">
		<!-- 内容区域 -->
		<view class="content">
			<!-- 基本信息卡片 -->
			<view class="info-card">
				<view class="student-info">
					<text class="name">{{userInfo.sName}}</text>
					<text class="id">学号：{{userInfo.sSid}}</text>
				</view>
				<view class="college-info">
					<text>{{userInfo.sGrade}}</text>
					<text>{{userInfo.sSpecialized}}</text>
				</view>
			</view>
			
			<!-- 功能菜单 -->
			<view class="menu-list">
				<view class="menu-item" @click="goTo('/pages/my/profile')">
					<view class="menu-left">
						<uni-icons type="person" size="20" color="#119790"></uni-icons>
						<text>个人资料</text>
					</view>
					<uni-icons type="right" size="16" color="#999"></uni-icons>
				</view>

				<view class="menu-item" @click="goTo('/pages/my/habit-record')">
					<view class="menu-left">
						<uni-icons type="bars" size="20" color="#119790"></uni-icons>
						<text>习惯记录</text>
					</view>
					<uni-icons type="right" size="16" color="#999"></uni-icons>
				</view>
				
				<view class="menu-item" @click="goTo('/pages/my/attitude-record')">
					<view class="menu-left">
						<uni-icons type="bars" size="20" color="#119790"></uni-icons>
						<text>学习态度</text>
					</view>
					<uni-icons type="right" size="16" color="#999"></uni-icons>
				</view>
				
				<view class="menu-item" @click="goTo('/pages/my/ePassword')">
					<view class="menu-left">
						<uni-icons type="person" size="20" color="#119790"></uni-icons>
						<text>修改密码</text>
					</view>
					<uni-icons type="right" size="16" color="#999"></uni-icons>
				</view>
				
				<view class="menu-item" @click="goTo('/pages/my/evaluation-record')">
					<view class="menu-left">
						<uni-icons type="bars" size="20" color="#119790"></uni-icons>
						<text>评估记录</text>
					</view>
					<uni-icons type="right" size="16" color="#999"></uni-icons>
				</view>
				
				<view class="menu-item" @click="goTo('/pages/my/warning-record')">
					<view class="menu-left">
						<uni-icons type="notification-filled" size="20" color="#119790"></uni-icons>
						<text>预警记录</text>
					</view>
					<view class="menu-right">
						<view class="badge" v-if="warningCount > 0">{{warningCount}}</view>
						<uni-icons type="right" size="16" color="#999"></uni-icons>
					</view>
				</view>
			</view>
			
			<!-- 退出登录按钮 -->
			<view class="logout-btn" @click="handleLogout">
				退出登录
			</view>
		</view>
	</view>
</template>

<script>
import { reactive, toRefs } from 'vue';
import { getUnreadWarningCount, resetUnreadWarningCount } from '@/utils/websocket.js'

export default {
	setup() {
		const state = reactive({
			warningCount: 0,  // 预警消息数量
			userInfo: {}
		})
		
		// 页面跳转方法
		const goTo = (url) => {
			// 如果跳转到预警记录页面，重置未读消息计数
			if (url === '/pages/my/warning-record') {
				resetUnreadWarningCount();
			}
			uni.navigateTo({
				url: url
			})
		}
		
		// 退出登录
		const handleLogout = () => {
			uni.showModal({
				title: '提示',
				content: '确定要退出登录吗？',
				success: (res) => {
					if (res.confirm) {
						uni.clearStorageSync()
						uni.reLaunch({
							url: '/pages/login/login'
						})
					}
				}
			})
		}
		
		function userinfo(){
			state.userInfo = uni.getStorageSync("student")
		}
		
		// 初始化未读消息数量
		function initWarningCount() {
			state.warningCount = getUnreadWarningCount();
		}
		
		// 监听未读消息数量变化
		function setupWarningCountListener() {
			uni.$on('updateUnreadWarningCount', (count) => {
				state.warningCount = count;
			});
		}
		
		// 移除事件监听
		function removeWarningCountListener() {
			uni.$off('updateUnreadWarningCount');
		}
		
		userinfo();
		initWarningCount();
		setupWarningCountListener();
		
		return {
			...toRefs(state),
			goTo,
			handleLogout
		}
	},
	// 使用uni-app的页面生命周期
	onUnload() {
		// 移除事件监听
		uni.$off('updateUnreadWarningCount');
	}
}
</script>

<style lang="scss">
page {
	background-color: #f5f5f5;
}

.my-container {
	min-height: 100%;
	
	.nav-header {
		height: 88rpx;
		background-color: #119790;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 30rpx;
		position: relative;
		
		.title {
			color: #fff;
			font-size: 32rpx;
			font-weight: 500;
		}
		
		.nav-right {
			display: flex;
			align-items: center;
			
			.icon-btn {
				position: relative;
				padding: 20rpx;
				
				.badge {
					position: absolute;
					top: 10rpx;
					right: 10rpx;
					background-color: #ff4d4f;
					color: #fff;
					font-size: 20rpx;
					height: 28rpx;
					min-width: 28rpx;
					padding: 0 6rpx;
					border-radius: 14rpx;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
		}
	}
	
	.content {
		padding: 30rpx;
		
		.info-card {
			background-color: #fff;
			border-radius: 12rpx;
			padding: 30rpx;
			margin-bottom: 30rpx;
			
			.student-info {
				margin-bottom: 20rpx;
				
				.name {
					font-size: 36rpx;
					font-weight: bold;
					color: #333;
					margin-right: 20rpx;
				}
				
				.id {
					font-size: 28rpx;
					color: #666;
				}
			}
			
			.college-info {
				font-size: 26rpx;
				color: #666;
				
				text {
					margin-right: 20rpx;
				}
			}
		}
		
		.menu-list {
			background-color: #fff;
			border-radius: 12rpx;
			margin-bottom: 30rpx;
			
			.menu-item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 30rpx;
				border-bottom: 1rpx solid #eee;
				
				&:last-child {
					border-bottom: none;
				}
				
				.menu-left {
					display: flex;
					align-items: center;
					
					text {
						font-size: 28rpx;
						color: #333;
						margin-left: 20rpx;
					}
				}
				
				.menu-right {
					display: flex;
					align-items: center;
					position: relative;
					
					.badge {
						background-color: #ff4d4f;
						color: #fff;
						font-size: 20rpx;
						height: 28rpx;
						min-width: 28rpx;
						padding: 0 6rpx;
						border-radius: 14rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						margin-right: 10rpx;
					}
				}
			}
		}
		
		.logout-btn {
			background-color: #fff;
			color: #ff4d4f;
			font-size: 32rpx;
			text-align: center;
			padding: 30rpx;
			border-radius: 12rpx;
		}
	}
}
</style> 